// 封装获取元素函数
function $(el){
    return document.querySelector(el)
}
function gets(el){
   return [...document.querySelectorAll(el)]
}
function zero(n){
    return n < 10? '0' + n : n
}
console.log(zero(20))
let list = $('.list'),
    ul = gets('ul'),
    num = $('.num'),
    an = ['A','B','C','D'],
    cuont_down = $('.count-down'),
    timer = null,
    time = 1,
    submit = $('.submit'),
    dialog = $('.dialog')
    span = $('.question>span');

// 渲染数据函数
function renderData(){
    let html = '',
        numEle = '';
     data.forEach((obj,idx) =>{
       html+= ` <div class="list-item">
                    <div class="no">${idx+1}</div>
                    <div class="question-content">
                        <h3>（${obj.score}）${obj.question}</h3>
                        <ul >`
         let li = obj.options.map((opt,i)=>{
            return `<li>
                        <input type="radio" name ="${idx}" id="${idx}-${i}" value="${an[i]}">
                         <label for="${idx}-${i}">${an[i]}.答案</label>
                    </li>`
         }).join('')
         html += li + `</ul></div></div>` 
         numEle += `<button data-id="${idx}">${idx+1}`
         list.innerHTML = html;
         num.innerHTML = numEle              
    })
}
renderData()
// 倒计时
function showTime(){
    let times = time*60,
        hours,
        mintuie,
        seconds;
    timer = setInterval(function(){
        times--;
        if(times <= 0){
            clearInterval(timer)
        }
        hours = Math.floor(times/3600);
        mintuie = Math.floor((times%3600)/60);
        seconds = times%60;
        console.log(mintuie)
        cuont_down.innerHTML = zero(hours) + ':' + zero(mintuie) + ':' + seconds
    },1000)
}
showTime()
// 答题之后题号高亮展示
list.addEventListener('click',(e)=>{
    let target = e.target;
    if(target.nodeName = 'INPUT'){
        let id = target.name,
            btns = num.children;
        btns[id].classList.add('active')
    }
})
// 点击题号跳转至题目
num.addEventListener('click',(e)=>{
    let target = e.target;
    if(target.nodeName ==='BUTTON'){
        let idx = target.getAttribute('data-id'),
        items = list.children;
    document.documentElement.scrollTop = items[idx].offsetTop;
    }
})

// 点击提交弹出弹框
submit.addEventListener('click',(e) =>{
    dialog.style.display = 'block';
    let btn = dialog.querySelector('button'),
        items = [...list.children],
        btns = num.children,
        total = 0,
        count = dialog.querySelector('span'),
        checked,
        val;
    items.forEach((item,idx) => {
        // 获取值
        checked = item.querySelector('input:checked');
        if(checked){
            if(checked.value === data){
                total += data[idx].score;
                btns[idx].classList.add('active');
            }else{
                btns[idx].classList.remove('active');
                btns[idx].classList.add('red');
            }
        }else{
            btns[idx].classList.remove('active');
            btns[idx].classList.add('red');
        }
        count.innerHTML = total;
    })
    btn.addEventListener('click',() => {
        dialog.style.display = 'none';
        // 将打错了的题的正确答案显示出来
        // 获取num下所有class为red的button
        let errors = [...num.querySelectorAll('button.red')];
        errors.forEach((item,i) => {
            let index = item.getAttribute('data-index');
            let p = document.createElement('p');
            p.style.color = 'green';
            p.innerHTML = '正确答案：' + 
            items[index].appendChild(p);
        })
    })

});

